import { useState } from 'react';

// 导入样式
import './Counter.css';

// 函数组件, 使用 hooks api 添加组件状态
export const Counter = () => {
  // 引入状态，状态初始值：0
  // 在组件内定义状态变量：count
  // 在组件内定义了修改状态的函数：setCount
  const [count, setCount] = useState(10);

  // 链接新组件状态-字符
  const [name, setName] = useState('Jack');
  // 修改name的事件处理函数
  const changeName = (newName, e) => {
    console.log(e);
    // 修改name
    setName(newName);
  };

  // 钩入 数组类型的状态
  const [books, setBooks] = useState([
    { id: 1, name: 'React' },
    { id: 2, name: 'Vue' },
  ]);
  // 修改书籍
  const changeBooks = () => {
    // 添加一本书
    // 一定要new 一个新数组
    setBooks([...books, { id: 3, name: 'Angular' }]);

    // 没有新的对象的地址
    // books.push({ id: 3, name: 'Angular' });
    // console.log(books);
    // setBooks(books);
    // console.log(books);
  };

  // 钩入 对象类型
  const [person, setPerson] = useState({ name: 'Rose', age: 18 });
  const changePerson = () => {
    // 错误做法
    // person.age = 100;
    // setPerson(person);
    // 正确修改数据
    setPerson({ ...person, age: 20 });
  };

  // 钩入 JSX
  const [jsx, setJsx] = useState(<h2>我是引入的JSX</h2>);
  // 修改 jsx
  const changeJsx = () => {
    setJsx(<h2>我是新的JSX</h2>);
  };

  return (
    <div>
      <h1 className="title">{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <h1>{name}</h1>
      <button onClick={(e) => changeName('Rose', e)}>name</button>
      {books.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
      <button onClick={changeBooks}>Books</button>

      <h1>
        {person.name}, {person.age}
      </h1>
      <button onClick={changePerson}>Rose</button>

      {jsx}
      <button onClick={changeJsx}>JSX</button>

      <div>{(() => console.log('render'))()}</div>
    </div>
  );
};
